<template>
    <div class="station-warp" :style="styleObject">
       <div class="user-warp">
            <station-information></station-information>
            <user-information class="auto-height"></user-information>
        </div>
        <div class="station-card tab-warp" >
            <a-page-header :backIcon="false" :ghost="false">
                <template slot="tags">
                    <div class="head-tags">
                        <p class="">SC/10001</p>
                        <p>生产编号</p>
                    </div>
                    <div class="head-tags">
                        <p>EBOOO1</p>
                        <p>产品型号</p>
                    </div>
                </template>
                <template slot="extra">
                    <a-button key="1" type="primary">
                    详情
                    </a-button>
                </template>
            </a-page-header>
            <div class="table-warp">
                <a-tabs v-model="activeTab" class="auto-height">
                    <a-tab-pane key="materiel">
                        <span slot="tab">
                            <a-icon type="container" />
                            物料
                        </span>
                        <station-materiel-table></station-materiel-table>
                    </a-tab-pane>
                    <a-tab-pane key="wip">
                        <span slot="tab">
                            <a-icon type="profile" />
                            在制品
                        </span>
                        <station-w-i-p-table ></station-w-i-p-table>
                    </a-tab-pane>
                    <a-button slot="tabBarExtraContent" @click="trayList" icon="profile"></a-button>
                </a-tabs>
                <button-group></button-group>
            </div>
        </div>
        <a-modal title="托盘信息" v-model="trayListModal" ok-text="确认" cancel-text="取消" @ok="hideModal">
            <a-table :pagination="false" :scroll="{ y: 200}" :columns="columns" :data-source="tableData" bordered></a-table>
        </a-modal>
    </div>
</template>
<script>
import buttonGroup from './components/buttonGroup'
import stationMaterielTable from './components/stationMaterielTable'
import stationWIPTable from './components/stationWIPTable'
import userInformation from './components/userInformation'
import stationInformation from './components/stationInformation'

export default {
  props: [],
  components: {
    buttonGroup,
    stationMaterielTable,
    stationWIPTable,
    userInformation,
    stationInformation
  },
  data() {
    return {
        trayListModal:false,
        activeTab:'materiel',
        columns:[
           {
                title: '托盘码',
                dataIndex: ' trayCode'
            }, {
                title: '承载内容',
                dataIndex: 'carryingContent'
            }
        ],
        tableData:[],
        styleObject: {
            height:'100%',
            minHeight:'550px !important'
        }
    }
  },
  methods: {
      trayList(){
        this.trayListModal = true;
      },
      hideModal(){
        this.trayListModal = false;
      }
  },
  created(){

  },
  mounted(){
    const that = this
    window.onresize = () => {
        return (() => {
            that.styleObject.height = (document.body.clientHeight - 140) +'px'
        })()
    }
  }
}
</script>
<style >
    .ant-layout-content{
        position: relative;
    }
    .station-warp{
         position: relative;
        /*top: 59px;
        bottom: 10px; */
        /* border: 1px solid; */
        /* left: 10px; */
        /* right: 0px; */
        /* max-height: 620px; */
    }
</style>
<style scoped>
    .real-warp{
        height: calc(100% - 62px);
    }
    .station-card{
        background:#fff;
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        
    }
    .station-card .ant-page-header{
        padding:10px;
    }
    .content{
        background:#fff;
        border: 1px solid #e8e8e8;
        border-radius: 2px;
    }
    .head-tags{
        display: inline-block;
        margin-left: 100px;
        font-size: 10px;
    }
    .head-tags:nth-of-type(1){
         margin-left: 20px;
    }
    .head-tags p{
        margin: 0px;
        font-size: 10px;
    }
    .head-tags p:nth-of-type(1){
        font-weight: bold;
        font-size: 16px;
    }
    .user-warp {
        width:320px;
        height:100%;
        display: flex;
        flex-direction: column;
    }
    .table-warp{
        height: calc(100% - 68px);
        padding:10px;
        display: flex;
        flex-direction: column;
    }
    .tab-warp{
        position: absolute;
        top:0px;
        left:330px;
        bottom:0px;
        right:0px;
    }
    .auto-height{
        flex-grow: 999;
    }
</style>
